<template>
  <div class="detail-box">
    <div class="back-box">
      <el-icon class="icon-white" size="28" color="#ffffff" @click="backHandle">
        <ArrowLeft />
      </el-icon>
    </div>
    <div class="jb-info w-card">
      <div class="title-box">
        <span>基本信息</span>
      </div>
      <div class="jb-info-box">
        <div class="shop-logo">商</div>
        <div class="jb-info-content">
          <div style="font-size:16px;">{{ infoForm.shopName || '' }}</div>
          <div>
            <span>
              店铺类型：
              <span>{{ infoForm.shopType == 1 ? '个人店铺' : infoForm.shopType == 2 ? '企业店铺' : '' }}</span>
            </span>
            <span>
              联系人：
              <span>{{ infoForm.contactsName || '' }}</span>
            </span>
            <span>
              联系电话：
              <span>{{ infoForm.contactsPhone || '' }}</span>
            </span>
            <span>
              供应商代码：
              <span>{{ infoForm.shopCode || '' }}</span>
            </span>
            <span>
              员工数量：
              <span>{{ infoForm.userNum || '' }}</span>
            </span>
            <span>
              下单折扣：
              <span>{{ infoForm.orderDiscount }}%</span>
            </span>
            <span>
              提交折扣：
              <span>{{ infoForm.submitDiscount }}%</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="info-detail w-card">
      <div class="title-box">
        <span>详细信息</span>
      </div>
      <div>
        <span v-show="infoForm.shopType == 2">
          企业名称：
          <span>{{ infoForm.companyName || '' }}</span>
        </span>
        <span>
          {{ infoForm.shopType == 1 ? '个人姓名' : infoForm.shopType == 2 ? '企业法人' : '联系人' }}：
          <span>{{ infoForm.legalManName || '' }}</span>
        </span>
        <span>
          {{ infoForm.shopType == 1 ? '个人证件号码' : infoForm.shopType == 2 ? '法人证件号码' : '证件号码' }}：
          <span>{{ infoForm.certificateNumber || '' }}</span>
        </span>
        <span class="license-box">
          {{ infoForm.shopType == 1 ? '身份证' : infoForm.shopType == 2 ? '营业执照' : '证件' }}：
          <el-image v-show="infoForm.licenseUrl" style="height: 60px" :src="infoForm.licenseUrl || ''" :zoom-rate="1.2"
            :max-scale="7" :min-scale="0.2" :preview-src-list="[infoForm.licenseUrl]" :initial-index="4" fit="cover" />
          <span v-show="!infoForm.licenseUrl">未录入</span>
        </span>
      </div>
    </div>
    <div class="table-box w-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="供销信息" name="1">
          <div class="change-tab">
            <div :class="{'active':changeTabActive == 1}" @click="tabChange(1)">供应商</div>
            <div :class="{'active':changeTabActive == 2}" @click="tabChange(2)">分销商</div>
          </div>
          <div class="table-content">
            <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="shopName" :label="changeTabActive == 1 ? '供应商名称' : '分销商名称'" align="center">
                <template v-slot="scope">
                  {{ scope.row.shopName || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="joinTime" :label="changeTabActive == 1 ? '加盟时间' : '建立时间'" align="center" width="180">
                <template v-slot="scope">
                  {{ scope.row.joinTime ? getDateTime(scope.row.joinTime)[6] : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="contactsName" label="联系人" align="center">
                <template v-slot="scope">
                  {{ scope.row.contactsName || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="contactsPhone" label="联系电话" align="center">
                <template v-slot="scope">
                  {{ scope.row.contactsPhone || '' }}
                </template>
              </el-table-column>
            </el-table>
            <div class="table-footer">
              <el-pagination v-model:currentPage="page" v-model:page-size="size" :page-sizes="[10, 20, 50, 100]" small
                :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="产品/商品信息" name="2">
          <div class="change-tab">
            <div :class="{'active':changeTabActive2 == 1}" @click="tabChange2(1)">自动生产接口</div>
            <div :class="{'active':changeTabActive2 == 2}" @click="tabChange2(2)">Ta的产品</div>
            <div :class="{'active':changeTabActive2 == 3}" @click="tabChange2(3)">Ta的自营商品</div>
            <div :class="{'active':changeTabActive2 == 4}" @click="tabChange2(4)">Ta的分销商品</div>
          </div>
          <div class="table-content">
            <el-table v-if="changeTabActive2 == 1" :height="tableHeight"
              :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="channelName" label="接口渠道名称" align="center">
                <template v-slot="scope">
                  {{ scope.row.channelName || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="开通时间" align="center" width="180">
                <template v-slot="scope">
                  {{ scope.row.createTime ? getDateTime(scope.row.createTime)[6] : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template v-slot="scope">
                  <div :class="'state'+scope.row.state">{{ scope.row.state == 2 ? '待付款' : scope.row.state == 3 ? '已付款' : '' }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-table v-if="changeTabActive2 == 2" :height="tableHeight"
              :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="productName" label="产品名称" align="center">
                <template v-slot="scope">
                  {{ scope.row.productName || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="productMode" label="生产方式" align="center">
                <template v-slot="scope">
                  {{ scope.row.productMode == 1 ? '手动生产' : scope.row.state == 2 ? '自动生产' : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template v-slot="scope">
                  <span
                    :class="'state2'+scope.row.state">{{ scope.row.state == 1 ? '正常' : scope.row.state == 2 ? '冻结' : scope.row.state == 3 ? '下架' : '' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-table v-if="changeTabActive2 == 3 || changeTabActive2 == 4" :height="tableHeight"
              :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
              :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe>
              <el-table-column type="index" width="55" label="序号" align="center" />
              <el-table-column prop="goodsName" label="商品名称" align="center">
                <template v-slot="scope">
                  {{ scope.row.goodsName || '' }}
                </template>
              </el-table-column>
              <el-table-column prop="goodsType" label="商品类型" align="center">
                <template v-slot="scope">
                  {{ scope.row.goodsType == 1 ? '自有商品' : scope.row.goodsType == 2 ? '分销商品' : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template v-slot="scope">
                  <span
                    :class="'state2'+scope.row.state">{{ scope.row.state == 1 ? '正常' : scope.row.state == 2 ? '冻结' : scope.row.state == 3 ? '下架' : '' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-footer">
              <el-pagination v-model:currentPage="page" v-model:page-size="size" :page-sizes="[10, 20, 50, 100]" small
                :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="生产/分销信息" name="3">
          <div class="order-box" :style="{'height':tableHeight+'px'}">
            <div>
              <div>
                <div>
                  <p>我的订单总数</p>
                  <span>{{ orderInfo.createSelf }}</span>
                </div>
                <div>
                  <p>我的订单已生产总数</p>
                  <span>{{ orderInfo.successSelf }}</span>
                </div>
                <div>
                  <p>分销订单总数</p>
                  <span>{{ orderInfo.createPromotion }}</span>
                </div>
                <div>
                  <p>分销订单已生产总数</p>
                  <span>{{ orderInfo.successPromotion }}</span>
                </div>
                <div>
                  <p>生产订单总数</p>
                  <span>{{ orderInfo.createProduce }}</span>
                </div>
                <div>
                  <p>生产订单已生产总数</p>
                  <span>{{ orderInfo.successProduce }}</span>
                </div>
                <div>
                  <p>销售待处理订单总数</p>
                  <span>{{ orderInfo.pendingSale }}</span>
                </div>
                <div>
                  <p>生产待处理订单总数</p>
                  <span>{{ orderInfo.pendingPro }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="账户信息" name="4">
          <div class="order-box" :style="{'height':tableHeight+'px'}">
            <div>
              <span>账户信息</span>
              <div>
                <div>
                  <p>账户余额(元)</p>
                  <span>{{ numFormat(zhInfo.leftFee/100) || '' }}</span>
                </div>
                <div>
                  <p>充值总金额(元)</p>
                  <span>{{ numFormat(zhInfo.chargeFee/100) || '' }}</span>
                </div>
              </div>
            </div>
            <div>
              <span>消费信息</span>
              <div>
                <div>
                  <p>下单消费(元)</p>
                  <span>{{ numFormat(zhInfo.orderCreateFee/100) || '' }}</span>
                </div>
                <div>
                  <p>生产消费(元)</p>
                  <span>{{ numFormat(zhInfo.orderProduceFee/100) || '' }}</span>
                </div>
                <div>
                  <p>接口消费(元)</p>
                  <span>{{ numFormat(zhInfo.channelFee/100) || '' }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { warningDeal, getWindowWidthAndHeight, getDateTime, numFormat } from '@/utils/utils'
import api from './api'
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const state = reactive({
      page: 1,
      size: 10,
      total: 0,
      tableHeight: 0,
      activeName: null,
      changeTabActive: 1,
      changeTabActive2: 1,
      incomingForm: {},
      infoForm: {},
      tableData: [],
      orderInfo: {},
      zhInfo: {},
    })

    watch(() => state.activeName, (newVal, oldVal) => {
      getTableData()
      let winHeight = null
      switch (newVal) {
        case '1':
          winHeight = getWindowWidthAndHeight()
          state.tableHeight = (winHeight.windowHeight - 630) < 300 ? 300 : winHeight.windowHeight - 630
          break
        case '2':
          winHeight = getWindowWidthAndHeight()
          state.tableHeight = (winHeight.windowHeight - 630) < 300 ? 300 : winHeight.windowHeight - 630
          break
        case '3':
          winHeight = getWindowWidthAndHeight()
          state.tableHeight = winHeight.windowHeight - 550
          break
        case '4':
          winHeight = getWindowWidthAndHeight()
          state.tableHeight = winHeight.windowHeight - 550
          break
      }
    })

    function getDetail() {
      const obj = {
        shopId: state.incomingForm.shopId
      }
      api.shopDetail(obj).then(res => {
        if (res.code == '200') {
          state.infoForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getTableData() {
      state.page = 1
      state.total = 0
      state.tableData = []
      switch (state.activeName) {
        case '1':
          getGXTable()
          break
        case '2':
          getCSTable()
          break
        case '3':
          getSFTable()
          break
        case '4':
          getZHTable()
          break
      }
    }

    function getGXTable() {
      switch (state.changeTabActive) {
        case 1:
          getGYSTable()
          break
        case 2:
          getFXSTable()
          break
      }
    }

    function getCSTable() {
      switch (state.changeTabActive2) {
        case 1:
          getAuto()
          break
        case 2:
          getTaC()
          break
        case 3:
          getTaGoods()
          break
        case 4:
          getTaFXGoods()
          break
      }
    }

    function getSFTable() {
      const obj = {
        shopId: state.incomingForm.shopId,
      }
      api.orderStatics(obj).then(res => {
        if (res.code == '200') {
          state.orderInfo = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getZHTable() {
      const obj = {
        shopId: state.incomingForm.shopId,
      }
      api.accountStatics(obj).then(res => {
        if (res.code == '200') {
          state.zhInfo = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getGYSTable() {
      const obj = {
        page: state.page,
        size: state.size,
        shopId: state.incomingForm.shopId,
      }
      api.shopSupplier(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getFXSTable() {
      const obj = {
        page: state.page,
        size: state.size,
        shopId: state.incomingForm.shopId,
      }
      api.shopConsumer(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getAuto() {
      const obj = {
        page: state.page,
        size: state.size,
        shopId: state.incomingForm.shopId,
      }
      api.shopChannel(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getTaC() {
      const obj = {
        page: state.page,
        size: state.size,
        shopId: state.incomingForm.shopId,
      }
      api.shopProduct(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getTaGoods() {
      const obj = {
        page: state.page,
        size: state.size,
        shopId: state.incomingForm.shopId,
        goodsType: 1,
      }
      api.shopGoods(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getTaFXGoods() {
      const obj = {
        page: state.page,
        size: state.size,
        shopId: state.incomingForm.shopId,
        goodsType: 2,
      }
      api.shopGoods(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function backHandle() {
      router.go(-1)
    }

    function tabChange(i) {
      state.changeTabActive = i
      getTableData()
    }

    function tabChange2(i) {
      state.changeTabActive2 = i
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    onMounted(() => {
      state.activeName = '1'
      state.incomingForm = JSON.parse(route.query.data) || {}
      getDetail()
    })

    return {
      ...toRefs(state),
      backHandle,
      tabChange,
      tabChange2,
      getDateTime,
      handleSizeChange,
      handleCurrentChange,
      numFormat,
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-box {
  width: 100%;
  height: 100%;
  .back-box {
    position: fixed;
  }
  > div:not(.back-box) {
    box-sizing: border-box;
    padding: 20px;
  }
  .jb-info {
    width: 100%;
    .jb-info-box {
      gap: 20px;
      background-color: #cee0ff;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 20px 50px 20px 20px;
      display: inline-flex;
      align-items: center;
      .jb-info-content {
        display: flex;
        flex-flow: column;
        gap: 10px;
        font-size: 14px;
        > div:last-of-type {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 20px;
          > span {
            color: #676b74;
            flex-shrink: 0;
            > span {
              color: #000000;
            }
          }
        }
      }
    }
  }
  .info-detail {
    margin-top: 20px;
    width: 100%;
    font-size: 14px;
    > div:last-of-type {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      > span {
        color: #676b74;
        flex-shrink: 0;
        > span {
          color: #000000;
        }
      }
    }
    .license-box {
      display: flex;
      align-items: flex-start;
    }
  }
  .table-box {
    margin-top: 20px;
    width: 100%;
  }
}
.title-box {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  > span {
    font-size: 16px;
    font-weight: bold;
  }
}
.shop-logo {
  background-color: #1266ff;
  border-radius: 10px;
  font-size: 24px;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  height: 50px;
  width: 50px;
}
.table-content {
  margin-top: 10px;
  .table-footer {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}

.order-box {
  overflow-y: auto;
  > div {
    &:not(:first-of-type) {
      margin-top: 10px;
    }
    > span {
      font-size: 14px;
      font-weight: bold;
    }
    > div {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
      font-size: 14px;
      margin-top: 10px;
      > div {
        box-sizing: border-box;
        padding: 10px 50px 10px 20px;
        background-color: #f2f4f7;
        color: #1f2329;
        > span {
          display: block;
          font-size: 18px;
          font-weight: bold;
          margin-top: 10px;
        }
      }
    }
  }
}

.state2,
.state3 {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  &::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
}
.state2 {
  &::before {
    background-color: #1266ff;
  }
}
.state3 {
  &::before {
    background-color: #67c23a;
  }
}

.state21,
.state22,
.state23 {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  &::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
}
.state21 {
  &::before {
    background-color: #1266ff;
  }
}
.state22 {
  &::before {
    background-color: #fe9000;
  }
}
.state23 {
  &::before {
    background-color: #727780;
  }
}
</style>